<template>
  <el-container class="advance-query-form advance-query">
    <el-aside width="300px">
      <el-card class="base-card" shadow="never"
        :body-style="{ padding: '0px' }"
        style="border: none; height: 100%;"
      >
        <div slot="header" class="base-card-header">
          <span class="header-title">{{treePanel.title}}</span>
          <div class="base-card-operation">
            <el-button type="text" icon="el-icon-refresh" @click="refreshGroup()">
              刷新
            </el-button>
            <el-button v-if="treePanel.supportAdd"
              type="text"
              icon="el-icon-circle-plus-outline"
              @click="onEditGroupItem(null)"
            >
              {{treePanel.addText}}
            </el-button>
          </div>
        </div>
        <el-scrollbar :style="{ height: height - 51 + 'px' }" class="custom-scroll">
          <el-tree ref="groupTree"
            :style="{height: (height - 60) + 'px'}"
            :data="groupDataList"
            :node-key="treePanel.keyColumnName"
            @node-click="onNodeClick"
            :highlight-current="true"
            :default-expand-all="true"
            :auto-expand-parent="true"
            :expand-on-click-node="false"
          >
            <el-row class="tree-node-item" type="flex" justify="space-between" align="middle" slot-scope="{ data }">
              <span>{{data[treePanel.nameColumnName]}}</span>
              <div style="margin-right: 10px;">
                <el-button v-if="treePanel.supportEdit"
                  type="text" icon="el-icon-edit-outline"
                  @click.stop="onEditGroupItem(data)"
                />
                <el-button v-if="treePanel.supportDelete"
                  type="text" icon="el-icon-delete"
                  @click.stop="onDeleteGroupItem(data)"
                />
              </div>
            </el-row>
          </el-tree>
        </el-scrollbar>
      </el-card>
    </el-aside>
    <el-main class="table-panel">
      <el-card class="base-card" shadow="never"
        :body-style="{ padding: '0px' }"
        style="border: none;"
      >
        <div slot="header" class="base-card-header">
          <span class="header-title">{{tablePanel.title}}</span>
          <div class="base-card-operation">
            <slot name="tableFilter" />
            <el-button v-if="tablePanel.supportAdd" type="primary"
              style="margin-left: 20px;"
              :size="defaultFormItemSize"
              @click="onAddTableItem()"
            >
              {{tablePanel.addText}}
            </el-button>
          </div>
        </div>
        <el-row style="padding: 15px;">
          <slot name="table" />
        </el-row>
      </el-card>
    </el-main>
    <slot />
  </el-container>
</template>

<script>
import { treeDataTranslate, findItemFromList } from '@/utils';

export default {
  name: 'formAdvanceQuery',
  props: {
    height: {
      type: Number
    },
    treePanel: {
      type: Object,
      required: true
    },
    tablePanel: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      currentGroup: undefined,
      groupDataList: []
    }
  },
  methods: {
    loadGroupData () {
      if (typeof this.treePanel.loadFunction === 'function') {
        this.treePanel.loadFunction().then(dataList => {
          this.groupDataList = treeDataTranslate(dataList.map(item => {
            return {
              ...item
            }
          }), this.treePanel.keyColumnName);
          if (this.currentGroup != null) {
            this.currentGroup = findItemFromList(dataList, this.currentGroup[this.treePanel.keyColumnName], this.treePanel.keyColumnName);
          }
          if (this.currentGroup == null) this.currentGroup = dataList[0];
          setTimeout(() => {
            if (this.$refs.groupTree) this.$refs.groupTree.setCurrentKey(this.currentGroup[this.treePanel.keyColumnName]);
          }, 50);
        }).catch(e => {});
      }
    },
    refreshGroup () {
      this.loadGroupData();
    },
    onEditGroupItem (data) {
      this.$emit('editGroupItem', data);
    },
    onNodeClick (data) {
      this.currentGroup = data;
      this.$emit('refreshTable', this.currentGroup);
    },
    onDeleteGroupItem (data) {
      this.$emit('deleteGroupItem', data);
    },
    onAddTableItem () {
      this.$emit('addTableItem');
    }
  },
  watch: {
    currentGroup: {
      handler () {
        this.$emit('refreshTable', this.currentGroup);
      }
    }
  },
  mounted () {
    this.loadGroupData();
  }
}
</script>

<style scoped>
  .table-panel {
    margin-left: 15px;
    background: white;
    padding: 0px;
  }

  .advance-query >>> .el-tree-node__content {
    height: 35px;
  }

  .advance-query .tree-node-item {
    width: 100%;
    height: 35px;
    line-height: 35px;
    font-size: 12px;
  }
</style>
